import Taro from '@tarojs/taro'
import { getCurrentInstance } from '@tarojs/taro'
import React, { PureComponent } from 'react'
// 界面组件
import { View, Text, RichText, Image } from '@tarojs/components'
import { AtTabs, AtTabsPane } from 'taro-ui'
import CTopbar from '@/components/CTopBar/index'
import CImage from '@/components/CImage/index'
import { get_evaluation_info_api, toggle_lick_api, selected_comment_api } from './service'
import './index.scss'
import like from '@/assets/like.png'
import dislike from '@/assets/dislike.png'
import GetTopBarInfo from '@/utils/GetTopBarInfo' //动态高度

/**
 *测试详情
 */
type I = {
  title: string //页面title
  id: number //页面id
  current: number
  commentData: any
  data: any
  system: string
  pageNum: number
  pageSize: number
  isMore: boolean
  isLike: boolean
}
interface HomeWeek {
  state: I
}
class HomeWeek extends PureComponent<any> {
  constructor(props) {
    super(props)
    this.state = {
      title: '', //页面title
      id: -1, //页面id
      current: 0,
      commentData: [],
      data: {
        isCollect: 0,
        question: [],
        questionNmePo: {},
      }, //页面数据
      system: '',
      pageNum: 1,
      pageSize: 10,
      isMore: false,
      isLike: false,
    }
  }

  componentWillMount() {
    Taro.showLoading()
    let { id, title } = getCurrentInstance().router?.params
    const system = Taro.getStorageSync('system')
    let pageId = Number(id)
    this.setState(
      {
        id: pageId,
        title,
        system,
      },
      () => {
        this.get_evaluation_info(pageId)
        this.get_selected_comments()
      },
    )
  }
  // 获取测试信息
  get_evaluation_info(id: number) {
    get_evaluation_info_api(id).then(({ result, data, message }) => {
      Taro.hideLoading()
      if (result < 0) {
        Taro.showToast({
          title: message,
          icon: 'none',
          duration: 2000,
        })
        return
      }
      this.setState({
        data: data,
        isLike: data.isCollect,
      })
    })
  }
  // 获取评论
  get_selected_comments() {
    const { id, pageNum, pageSize, commentData } = this.state
    selected_comment_api(id, pageNum, pageSize).then(({ result, data }) => {
      const arr = Array.from(data)
      // if (arr.length === pageSize) {
      //   this.setState({
      //     isMore: true,
      //   })
      // }
      // this.setState({
      //   commentData: commentData.concat(...arr),
      // })

      this.setState({
        commentData: commentData.concat(...arr),
      })
    })
  }

  onChange(value) {
    this.setState({
      value: value,
    })
  }
  handleClick(value) {
    this.setState({
      current: value,
    })
  }
  // 切换tab
  toggleLick() {
    const id = this.state.id
    console.log('ww')
    toggle_lick_api(id, 1).then(({ result, data }) => {
      console.log(data)
      this.get_evaluation_info(Number(id))
    })
  }
  // 去往测试 或者支付
  gotoPage(isPay, id) {
    console.log(isPay)

    const { system } = this.state
    if (!id) {
      Taro.showToast({
        title: '请稍后再试！',
        icon: 'none',
        duration: 2000,
      })
      return
    }
    if (isPay) {
      Taro.navigateTo({
        url: '/pages/Home/TestQuestions/index?id=' + id,
      })
    } else {
      Taro.navigateTo({
        url: '/pages/Pay/index?id=' + id + '&type=1',
      })
    }
  }

  onReachBottom() {
    const { pageNum, isMore, current } = this.state
    if (current === 1) {
      // if (isMore) {
      this.setState(
        {
          pageNum: pageNum + 1,
        },
        () => {
          this.get_selected_comments()
        },
      )
      // } else {
      //   Taro.showToast({
      //     icon: 'none',
      //     title: '没有数据啦',
      //     mask: true,
      //   })
      // }
    }
  }

  render() {
    const { system = '', commentData = [], isLike = false, title = '', data = {} } = this.state
    const tabList = [{ title: '测评介绍' }, { title: '精彩评论' }]
    return (
      <View className='pagewrap' style={{ paddingTop: `${GetTopBarInfo().TopBarHeight}px` }}>
        <View className='header'>
          <CTopbar title={title} showBack></CTopbar>
        </View>
        <View className='colleg'>
          {/* 课程图片 */}
          <View className='imageContainer'>
            <CImage src={data.questionImg}></CImage>
          </View>
          {/* 课程介绍 */}
          <View className='padding25'>
            <View>
              <Text className='title'>{data.questionName}</Text>
            </View>
            <View className='flexNum'>
              <Text className='subtitle'>{data.questionSubtitle}</Text>
              <Text></Text>
            </View>
            <View className='flexPriceAndFollow'>
              {/* 价格 */}
              {system.indexOf('iOS') < 0 ? (
                <View className='priceNum'>
                  <Text className='Sapplets'>{data.price === 0 ? '' : '￥'}</Text>
                  {data.price === 0 ? (
                    '免费'
                  ) : (
                    <View>
                      <Text>{data.price?.toString().split('.')[0]}</Text>
                      <Text>{data.price?.toString().split('.')[1] ? '.' : ''}</Text>
                      <Text className='Sapplets'>{data.price?.toString().split('.')[1]}</Text>
                    </View>
                  )}
                </View>
              ) : (
                <View className='priceNum'>免费</View>
              )}

              {/* 切换喜欢 */}
              <View className='flex_1'>
                <View
                  className='like_wrapper'
                  onClick={() => {
                    this.toggleLick()
                  }}
                >
                  {isLike ? <Image src={like} /> : <Image src={dislike} />}

                  <Text className='likeStyle'>{isLike ? '已关注' : '关注'}</Text>
                </View>
              </View>
            </View>

            {/* XX精选题 XX人测试 */}
            <View className='dataTag'>
              <Text className='tagAfter'>{data.questionNumber || 0}道精选题</Text>
              <Text className='tagAfter'>{data.testNumber || 0}人已测</Text>
            </View>
          </View>

          {/* tag切换栏 */}

          <View className='tabsWsrap'>
            <AtTabs current={this.state.current} tabList={tabList} onClick={this.handleClick.bind(this)}>
              <AtTabsPane current={this.state.current} index={0}>
                <View className='introduction'>
                  <Text className='introductionTitle'>测评介绍</Text>
                </View>
                <View className='richtext'>
                  <RichText nodes={data.remarks}></RichText>
                </View>

                {/* 站位 */}
                <View className='margintop80'></View>
              </AtTabsPane>
              <AtTabsPane current={this.state.current} index={1}>
                <View className='GreatComments'>
                  <Text className='GreatCommentsTitle'>精彩评论</Text>
                </View>
                {commentData.map((c, i) => {
                  return (
                    <View className='commentItem' key={i}>
                      <View className='authorImg'>
                        <CImage src={c.avatarUrl} circle></CImage>
                      </View>
                      <View className='commentRight'>
                        <View className='commentTop'>
                          <Text className='nickName'>{c.nickName}</Text>
                          <Text className='commentDate'>{c.gmtCreate}</Text>
                        </View>
                        <View className='commentContent'>{c.comment}</View>
                      </View>
                    </View>
                  )
                })}

                {/* 站位 */}
                <View className='margintop80'></View>
              </AtTabsPane>
            </AtTabs>
          </View>

          {/* 固定按钮 */}
          <View className='footerBtn' onClick={this.gotoPage.bind(this, data.isPay, data.id)}>
            {system.indexOf('iOS') < 0 ? (
              data.isPay ? (
                <Text>去测试</Text>
              ) : (
                <Text className='footerBtnSpan'>立即测试{data.price > 0 ? '￥' + data.price : ''}</Text>
              )
            ) : (
              <Text className='footerBtnSpan'>免费测试</Text>
            )}
          </View>
        </View>
      </View>
    )
  }
}

export default HomeWeek
